<template>
  <div class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
    <!-- 
      这个 router-view 是最顶层的，它会渲染 TabLayout 或者 Login
      这里的 transition 会在 TabLayout 和 Login 之间切换时触发
    -->
    <router-view v-slot="{ Component, route }">
      <transition :name="appStore.transitionName" mode="out-in">
        <!-- 
          【修复】使用 route.matched[0].name 作为 key。
          对于 Home, Messages, Me, route.matched[0] 都是指向 path:'/' 的那个父路由。
          它的 name 是 undefined (因为你没设置), 但 path 是 '/'。我们可以用 path。
          或者给父路由也加上 name。我们这里给父路由加个 name 会更清晰。
          
          这样，在 Home, Messages, Me 之间切换时，key 保持不变，TabLayout 不会重新渲染。
          只有从 TabLayout 切换到 Login 时，key 才会改变。
          :key="route.matched[0].name || route.matched[0].path"
        -->
        <div v-if="Component" :key="route.matched[0]?.name" class="page-container">
          <component :is="Component" />
        </div>
      </transition>
    </router-view>
    <ModalProvider />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useAppStore } from './store/modules/app';
import {useRouter} from 'vue-router'
import ModalProvider from '@/modal/providers/ModalProvider.vue';
const appStore = useAppStore();
const router = useRouter()
// 在组件挂载时，调用 action 初始化主题
onMounted(() => {
  appStore.initTheme();
  router.push('/home')
});
</script>

<style>
#app > div {
  height: 100%;
  width: 100%;
  position: relative;
}
.page-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
  overflow-y: auto;
}


/* --- Slide (左右滑动) --- */
.slide-left-enter-from { transform: translateX(100%); }
.slide-left-leave-to { transform: translateX(-50%); opacity: 0.5; }
.slide-right-enter-from { transform: translateX(-50%); opacity: 0.5; }
.slide-right-leave-to { transform: translateX(100%); }

/* --- Fade (淡入淡出) --- */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition-property: opacity; /* fade 动画只改变 opacity */
}

/* --- Bottom (从下弹出) --- */
.bottom-enter-from { transform: translateY(100%); }
.bottom-leave-to { transform: translateY(100%); }
/* 注意：bottom 动画通常只定义进入，离开时是新页面覆盖，旧页面直接消失，所以 leave-to 和 enter-from 可以一样 */

/* --- Zoom (缩放) --- */
.zoom-enter-from { transform: scale(0.95); opacity: 0; }
.zoom-leave-to { transform: scale(1.05); opacity: 0; }

.none-enter-active, .none-leave-active {
  transition: none;
}
</style>
